<template>
	<view class="v-search">
		<view>
			<view class="search-label">分类</view>
			<view class="search-item">
				<view class="search-item-sub" v-for="(item,index) in cateRange" :key="index"
				:class="{curr:currSelectList[5] && currSelectList[5][index] || (where['cate_id'] && where['cate_id'].id == item.id)}" 
				@click="select({id:5,name:'cate_id'}, index)">{{item.title}}</view>
			</view>
		</view>
		<view>
			<view class="search-label">工序</view>
			<view class="search-item">
				<view class="search-item-sub" v-for="(item,index) in mTypeRange" :key="index"
				:class="{curr:currSelectList[1] && currSelectList[1][index] || (where['m_type'] && where['m_type'].id == item.id)}" 
				@click="select({id:1,name:'m_type'}, index)">{{item.title}}</view>
			</view>
		</view>
		<view class="hr"></view>
		<view>
			<view class="search-label">发货地址</view>
			<view>
				<picker mode="multiSelector" @change="bindRegionChange"
					@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
					<view class='acea-row'>
						<view class="picker" >{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
						<view class='iconfont icon-dizhi fontcolor' style="margin-left: 10rpx;"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="hr"></view>
		<view>
			<view class="search-label">价格(元)</view>
			<view class="search-item">
				<view class="search-item-sub" v-for="(item,index) in priceRange" :key="index"
				:class="{curr:currSelectList[3] && currSelectList[3][index] ||(where['price'] && where['price'].id == item.id)}"
				@click="select({id:3,name:'price'}, index)">{{item.title}}</view>
			</view>
		</view>
		<view class="hr"></view>
		<view>
			<view class="search-label">成色</view>
			<view class="search-item">
				<view class="search-item-sub" v-for="(item,index) in wearList" :key="index"
				:class="{curr:currSelectList[4] && currSelectList[4][index] ||(where['wear'] && where['wear'].id == item.id)}"
				@click="select({id:4,name:'wear'}, index)">{{item.title}}</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import { colorChange, getCity } from '@/api/api.js';
	export default{
		props:{
			where:{
				type: Object
			},
			searchTypeList:{
				type: Array,
			},
			cateRange:{
				type: Array,
			},
			mTypeRange:{
				type: Array,
			},
			priceRange:{
				type: Array,
			}
		},
		data(){
			return {
				wearList: [
					{id:1, title:'一成'},
					{id:2, title:'二成'},
					{id:3, title:'三成'},
					{id:4, title:'四成'},
					{id:5, title:'五成'},
					{id:6, title:'六成'},
					{id:7, title:'七成'},
					{id:8, title:'八成'},
					{id:9, title:'九成'},
					{id:10, title:'全新'}
				],
				currSelectList: [],
				
				region: [`省`, `市`, `区`], 
				valueRegion: [0, 0, 0],
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
			}
		},
		mounted(){
			this.getCityList()
			if(this.where.from_addr && this.where.from_addr.title){
				this.region = this.where.from_addr.title.split(",")
			}
		},
		methods:{
			select(type, index){
				if(this.currSelectList[type.id] && this.currSelectList[type.id][index]){
					this.currSelectList[type.id][index] = false
				}else{
					this.currSelectList[type.id] = [];
					this.currSelectList[type.id][index] = true
				}
				
				let item
				switch(type.id){
					case 0: // 排序
						break;
					case 1: // 工序
						item = this.mTypeRange[index]
						break;
					case 2: // 发货地
						break;
					case 3: // 价格
						item = this.priceRange[index]
						break;
					case 4: // 成色
						item = this.wearList[index]
						break;
					case 5: // 分类
						item = this.cateRange[index]
						break;
					case 9: // 条件筛选
						
						break;
					
				}
				
				this.$forceUpdate()
				this.$emit("onWhere", {type:type.name, item})
				
				// this.$emit("onSelect", {index})
			},
			bindRegionChange(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						c: []
					},
					city = province.c[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;
			
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
				
				let item = {id:0,title:this.region.join(",")}
				this.$emit("onWhere", {type:"from_addr", item})
			},
			bindMultiPickerColumnChange(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						c: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
						multiArray[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:
			
						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
			},
			getCityList() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize() {
				let that = this,
					province = [],
					city = [],
					area = [];
				let cityChildren = that.district[0].c || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
				that.district.forEach((item, i) => {
					province.push(item.n);
					if (item.n === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});
				that.district[this.valueRegion[0]].c.forEach((item, i) => {
					if (this.region[1] == item.c) {
						this.valueRegion[1] = i
						this.multiIndex[1] = i
					}
					city.push(item.n);
				});
				that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
					if (this.region[2] == item.c) {
						this.valueRegion[2] = i
						this.multiIndex[2] = i
					}
					area.push(item.n);
				});
				this.multiArray = [province, city, area]
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}
	.v-search{
		width: 100%;
		height: 80%;
		text-align: cneter;
	}
	
	.hr{
		width: 100%;
		height: 1rpx;
		background-color: #eee;
		margin: 20rpx 0;
	}
	.item{
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: solid 1px #eee;
		font-size: 30rpx;
	}
	.search-label{
		color: #999;
		margin-bottom: 10rpx;
	}
	.search-item{
		@include flex;
		flex-wrap: wrap;
		.search-item-sub{
			flex-shrink: 1;
			padding: 10rpx 20rpx;
			margin-right: 10rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			&.curr{
				color: #fff;
				background-color: #007aff;
				border: 1px solid #007aff;
			}
		}
	}
</style>